* {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .logo,
        .mainbody,
        .right,
        .footer {
            text-align: center;

        }

        .logo {
            height: 80px;
            line-height: 80px;
            border: 1px solid #000;
            order: 1;
            margin: 1px;
            
        }

        .nav {
            height: 33px;
            border: 1px solid #000;
            order: 2;
            margin: 1px;

        }

        .mainbody {
            margin: 1px;
            height: 100vh;

            flex-grow: 1;
            border: 1px solid #000;
            order: 3;
            display: grid;
            grid-template-columns: 15% auto 15%;
            grid-template-rows: 100%;
        }

        .mainbody>div {
            border: 1px solid #000;
        }

        .footer {
            margin: 1px;
            height: 80px;
            line-height: 80px;
            border: 1px solid #000;
            order: 4;
        }

        .right {
            display: flex;
            flex-direction: column;
        }

        .login,
        .userinfo {
            height: 120px;
            line-height: 120px;
            border: 1px solid #000;
        }

        .nav>a {
            text-decoration: none;
        }

        .left {
            text-align: center;
        }

        .left>ul {
            text-decoration: none;
        }